import React, { useEffect } from 'react';
import LogicFlow from '@logicflow/core';
import { DndPanel, SelectionSelect } from '@logicflow/extension'
import ExampleHeader from '../../../../components/example-header';
const config = {
  stopScrollGraph: true,
  stopZoomGraph: true,
};

export default function DndPanelExample() {
  useEffect(() => {
    LogicFlow.use(DndPanel);
    LogicFlow.use(SelectionSelect);
    const lf = new LogicFlow({
      ...config,
      grid: {
        size: 10,
        type: 'dot'
      },
      container: document.querySelector('#graph') as HTMLElement
    });
    lf.extension.dndPanel.setPatternItems([
      {
        label: '选区',
        icon: '',
        callback: () => {
          lf.openSelectionSelect();
          lf.once('selection:selected', () => {
            lf.closeSelectionSelect();
          });
        }
      },
      {
        type: 'circle',
        text: '开始',
        label: '开始节点',
        icon: '',
      },
      {
        type: 'rect',
        label: '用户任务',
        icon: '',
        className: 'important-node'
      },
      {
        type: 'rect',
        label: '系统任务',
        icon: '',
        cls: 'import_icon'
      },
      {
        type: 'diamond',
        label: '条件判断',
        icon: '',
      },
      {
        type: 'circle',
        text: '结束',
        label: '结束节点',
        icon: '',
      }
    ]);
    // 订阅dnd panel事件
    // lf.graphModel.eventCenter.on('dnd:panel-dbclick', (args) => {
    //   console.log('args', args);
    // })
    lf.render();

  }, []);

  return (
    <>
      <ExampleHeader githubPath="/extension/components/dnd-panel/index.tsx" />
      <div id="graph" className="viewport" />
    </>
  )
}
